<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的优惠券</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="css/coupon.css">

    <script type="text/javascript" src="../../js/base.js"></script>
    <style>
        .aui-tab-item.aui-active {
            color:#000;
            border-bottom: 2px solid #f10b31;
        }
        @media screen and (max-width:321px){
            .rowHeight{
                padding-top:0 !important
            }
        }
        .aui-btn{
            height:1.2rem;
            line-height: 1.2rem;
        }
    </style>
</head>
<body>
<!--<header class="aui-bar aui-bar-nav aui-bar-top">-->
<!--<a class="aui-pull-left aui-btn goBack" >-->
<!--<span class="aui-iconfont aui-icon-left"></span>-->
<!--</a>-->
<!--<div class="aui-title">我的优惠券</div>-->
<!--</header>-->
<div id="app" v-cloak>
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item aui-active"  @click="changeTab('0')">未使用</div>
        <div class="aui-tab-item"  @click="changeTab('1')">已使用</div>
        <div class="aui-tab-item"  @click="changeTab('3')">已过期</div>
    </div>
    <div id="demo1"  class=" aui-margin-t-10"  v-if="couponList.length>=0" v-for="couponInfo,index in couponList">
        <ul class="aui-list">
            <li class="aui-list-item  aui-padded-0">
                <div class="aui-flex-col aui-flex-item-12 aui-padded-l-10 aui-padded-r-10 aui-bg-default"   v-bind:id="'coupon'+index">
                    <div class="aui-flex-item-4" style="position: relative">
                        <img v-if="couponInfo.is_used==0" src="../../icon/3-3/couponBg1.png"  alt="" style="height:5.8rem">
                        <img  v-if="couponInfo.is_used==1" src="../../icon/3-3/couponBg2.png"  alt="" style="height:5.8rem">
                        <div class="couponPrice"><span>￥</span>{{getPrice(couponInfo.coupon_mustmoney)}}</div>
                        <div class="remark">满{{getPrice(couponInfo.coupon_money)}}元可用</div>
                    </div>
                    <div class="aui-flex-item-8 aui-padded-l-10 aui-padded-r-10" style="background: #fff"  @click="goGoods_detail(index)">
                        <div class="aui-flex-row aui-padded-b-5 aui-padded-t-10 rowHeight" >
                            <div class="aui-flex-item-12">
                                <span v-if="couponInfo.is_used==0" class="aui-font-size-14" style="background: #56ccf2;padding:0.2rem 0.3rem;border-radius: 0.1rem;color:#fff;margin-right:0.5rem">满减券</span>
                                <span v-if="couponInfo.is_used==1" class="aui-font-size-14" style="background: #ccc;padding:0.2rem 0.3rem;border-radius: 0.1rem;color:#fff;margin-right:0.5rem">满减券</span>
                                <span class="aui-font-size-16 aui-margin-l-5" style="font-weight: bold">{{couponInfo.coupon_name}}</span>
                            </div>
                            <div class="aui-padded-t-15 rowHeight" >
                                <span class="aui-font-size-12 textCol" style="height:1.5rem;line-height:1.5rem">{{getDate(couponInfo.start_time+"000")}}-{{getDate(couponInfo.end_time+"000")}}</span>
                                <span v-if="couponInfo.is_used==0" class=" aui-btn aui-btn-info aui-btn-outlined  aui-pull-right  aui-font-size-12" style="border-radius: 0.8rem"> {{getCouponStatus(couponInfo.is_used,couponInfo.end_time)}} </span>
                                <span v-if="couponInfo.is_used==1" class=" aui-btn aui-btn-default aui-btn-outlined  aui-pull-right  aui-font-size-12" style="border-radius: 0.8rem"> {{getCouponStatus(couponInfo.is_used,couponInfo.end_time)}} </span>
                            </div>
                        </div>
                        <!--<div  class="aui-padded-r-10 dashed">-->
                        <!--&lt;!&ndash;<span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">满￥{{couponInfo.coupon_mustmoney}}减￥{{couponInfo.coupon_money}}</span>&ndash;&gt;-->
                        <!--<span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem"></span>-->
                        <!--</div>-->
                        <div  class="aui-padded-r-10 dashed">
                            <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">指定商品可用</span>
                    <span class=" aui-pull-right">
                    <i class="aui-iconfont aui-icon-down" style="font-size: 0.5rem;display:block;margin-top:0.3rem"></i>
                    </span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div v-if="!couponList.length">
        <div style="position: absolute;top:50%;left:50%;margin-top:-5rem;margin-left:-3rem">
            <img src="../../icon/3-3/daiyan.png" alt="" style="width:6rem">
            <div  style="margin-top:0.5rem">暂无该类优惠券</div>
        </div>
    </div>
</div>



</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-tab.js"></script>
<script type="text/javascript" src="./js/coupon.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>
</body>
</html>